<template>

	<TheHeader logo="src/assets/vue.svg" lang="cn" @headerClick="headerClick">
		<template #search>
			<public-search style="margin-top: 30px;" :recent-search-item="['hotel','dishes','chair']"
				:popular-search-item="['beds','Hair conditioner','Wave Point Cup']" />
		</template>
	</TheHeader>


	<TheCategory lang="en" :categories="categories" @categoryClick="categoryClick" />
	<TheMarket market="en" color="#c2c2c2" selected_color="#e3a3c2" mouseover_color="#3e4"
		@marketClick="categoryClick" />
	<the-navigator-menu current="en" color="#c2c2c2" selected_color="#e3a3c2" mouseover_color="#3e4"
		@menuClick="categoryClick" :menus="menus">

	</the-navigator-menu>

	<public-website-menu stylee="margin-top: 30px;" />
	<public-website-footer />
	<public-top-menu menu2-icon-number="4" menu3-icon-number="5" />
	<public-top-menu style="margin-top: 30px;" menu2-icon-number="3" menu3-icon-number="5" is-signed
		menu4-hello-msg="Hi, Charles Ethan" />
	<public-search style="margin-top: 30px;" :recent-search-item="['hotel','dishes','chair']"
		:popular-search-item="['beds','Hair conditioner','Wave Point Cup']" />
	<public-header style="margin-top: 30px;" background-img="/img/components/ui/header/header-background.png" />
	<public-header style="margin-top: 30px;" is-show-search :is-show-top-menu="false" />
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import category from '@/assets/images/ui/category/u566.png'

	import TheHeader from '@/components/ui/TheHeader.vue'
	import TheCategory from '@/components/ui/TheCategory.vue'
	import TheMarket from '@/components/ui/TheMarket.vue'
	import TheNavigatorMenu from '@/components/ui/TheNavigatorMenu.vue'
	import PublicWebsiteMenu from '@/components/ui/PublicWebsiteMenu.vue'
	import PublicWebsiteFooter from '@/components/ui/PublicWebsiteFooter.vue'
	import PublicTopMenu from '@/components/ui/PublicTopMenu.vue'
	import PublicSearch from '@/components/ui/PublicSearch.vue'
	import PublicHeader from '@/components/ui/PublicHeader.vue'

	const menus = ref([{
			id: 'ddd',
			title: '用户',
			icon: category
		},
		{
			id: 'ddd',
			title: '角色dddddddddddddddd',
			icon: category
		}, {
			id: 'ddd',
			title: '用户',
			icon: category
		},
		{
			id: 'ddd',
			title: '角色',
			icon: category
		}, {
			id: 'ddd',
			title: '用户',
			icon: category
		},
		{
			id: 'ddd',
			title: '角色',
			icon: category
		}, {
			id: 'ddd',
			title: '用户',
			icon: category
		},
		{
			id: 'ddd',
			title: '角色',
			icon: category
		}, {
			id: 'ddd',
			title: '用户',
			icon: category
		},
		{
			id: 'ddd',
			title: '角色',
			icon: category
		}, {
			id: 'ddd',
			title: '用户',
			icon: category
		},
		{
			id: 'ddd',
			title: '角色',
			icon: category
		}, {
			id: 'ddd',
			title: '用户',
			icon: category
		},
		{
			id: 'ddd',
			title: '角色',
			icon: category
		}, {
			id: 'ddd',
			title: '用户',
			icon: category
		},
		{
			id: 'ddd',
			title: '角色',
			icon: category
		}, {
			id: 'ddd',
			title: '用户',
			icon: category
		},
		{
			id: 'ddd',
			title: '角色',
			icon: category
		}
	]);

	const categories = ref([{
			id: 'ddd',
			title: '采购',
			icon: category,
			children: [{
				id: 'ddd',
				title: '测试',
				icon: category,
				children: [{
						id: 'ddd',
						title: '用户',
						icon: category
					},
					{
						id: 'ddd',
						title: '角色dddddddddddddddd',
						icon: category
					}, {
						id: 'ddd',
						title: '用户',
						icon: category
					},
					{
						id: 'ddd',
						title: '角色',
						icon: category
					}, {
						id: 'ddd',
						title: '用户',
						icon: category
					},
					{
						id: 'ddd',
						title: '角色',
						icon: category
					}, {
						id: 'ddd',
						title: '用户',
						icon: category
					},
					{
						id: 'ddd',
						title: '角色',
						icon: category
					}, {
						id: 'ddd',
						title: '用户',
						icon: category
					},
					{
						id: 'ddd',
						title: '角色',
						icon: category
					}, {
						id: 'ddd',
						title: '用户',
						icon: category
					},
					{
						id: 'ddd',
						title: '角色',
						icon: category
					}, {
						id: 'ddd',
						title: '用户',
						icon: category
					},
					{
						id: 'ddd',
						title: '角色',
						icon: category
					}, {
						id: 'ddd',
						title: '用户',
						icon: category
					},
					{
						id: 'ddd',
						title: '角色',
						icon: category
					}, {
						id: 'ddd',
						title: '用户',
						icon: category
					},
					{
						id: 'ddd',
						title: '角色',
						icon: category
					}
				]
			}, {
				id: 'ddd',
				title: '订单',
				icon: category,
				children: [{
						id: 'ddd',
						title: '用户',
						icon: category
					},
					{
						id: 'ddd',
						title: '角色dddddddddddddddd',
						icon: category
					}, {
						id: 'ddd',
						title: '用户',
						icon: category
					},
					{
						id: 'ddd',
						title: '角色',
						icon: category
					}, {
						id: 'ddd',
						title: '用户',
						icon: category
					},
					{
						id: 'ddd',
						title: '角色',
						icon: category
					}, {
						id: 'ddd',
						title: '用户',
						icon: category
					},
					{
						id: 'ddd',
						title: '角色',
						icon: category
					}, {
						id: 'ddd',
						title: '用户',
						icon: category
					},
					{
						id: 'ddd',
						title: '角色',
						icon: category
					}, {
						id: 'ddd',
						title: '用户',
						icon: category
					},
					{
						id: 'ddd',
						title: '角色',
						icon: category
					}, {
						id: 'ddd',
						title: '用户',
						icon: category
					},
					{
						id: 'ddd',
						title: '角色',
						icon: category
					}, {
						id: 'ddd',
						title: '用户',
						icon: category
					},
					{
						id: 'ddd',
						title: '角色',
						icon: category
					}, {
						id: 'ddd',
						title: '用户',
						icon: category
					},
					{
						id: 'ddd',
						title: '角色',
						icon: category
					}
				]
			}]
		},
		{
			id: 'ddd',
			title: '仓库',
			icon: category,
			children: [{
				id: 'ddd',
				title: '角色',
				children: [{
					id: 'ddd',
					title: 'asddfasdf'
				}]
			}]
		}
	])

	function headerClick(item) {
		console.log(item)
	}

	function categoryClick(item) {
		console.log(item)
	}
</script>

<style scoped></style>